<template>
	<view class="container">
		<view class="header">
			<text class="title">游戏记录</text>
			<text class="total-time">总游戏时长 {{ totalPlayTime }}小时</text>
		</view>
		
		<view class="history-list">
			<view v-for="(group, date) in groupedHistory" :key="date">
				<view class="date-header">
					<text class="date-text">{{ date }}</text>
					<text class="daily-time">{{ getDailyPlayTime(group) }}小时</text>
				</view>
				
				<view class="game-records">
					<view class="record-item" v-for="(record, index) in group" :key="index" 
						@click="navigateToGameDetail(record.id)">
						<image :src="record.logo" class="game-logo" mode="aspectFill" />
						<view class="game-info">
							<text class="game-name">{{ record.name }}</text>
							<view class="play-info">
								<text class="play-duration">游戏时长 {{ record.duration }}分钟</text>
								<text class="play-time">{{ record.time }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="empty-state" v-if="Object.keys(groupedHistory).length === 0">
			<image src="/static/empty-history.png" mode="aspectFit" class="empty-image" />
			<text class="empty-text">还没有游戏记录哦</text>
		</view>
	</view>
</template>

<script>
import { games } from '../../../utils/gameData.js';

export default {
	data() {
		return {
			groupedHistory: {},
			totalPlayTime: 0
		}
	},
	created() {
		// 模拟生成游戏记录数据
		this.generateMockData();
	},
	methods: {
		generateMockData() {
			const mockRecords = [];
			let totalMinutes = 0;
			
			// 生成最近7天的记录
			for(let i = 0; i < 7; i++) {
				const date = new Date();
				date.setDate(date.getDate() - i);
				const recordsCount = Math.floor(Math.random() * 3) + 1; // 每天1-3条记录
				
				for(let j = 0; j < recordsCount; j++) {
					const game = games[Math.floor(Math.random() * games.length)];
					const duration = Math.floor(Math.random() * 120) + 30; // 30-150分钟
					totalMinutes += duration;
					
					mockRecords.push({
						date: this.formatDate(date),
						id: game.game_id,
						name: game.game_name,
						logo: game.game_logo,
						duration: duration,
						time: `${Math.floor(Math.random() * 24)}:${String(Math.floor(Math.random() * 60)).padStart(2, '0')}`
					});
				}
			}
			
			// 按日期分组
			this.groupedHistory = mockRecords.reduce((groups, record) => {
				if (!groups[record.date]) {
					groups[record.date] = [];
				}
				groups[record.date].push(record);
				return groups;
			}, {});
			
			this.totalPlayTime = (totalMinutes / 60).toFixed(1);
		},
		formatDate(date) {
			const today = new Date();
			const yesterday = new Date(today);
			yesterday.setDate(yesterday.getDate() - 1);
			
			if (date.toDateString() === today.toDateString()) {
				return '今天';
			} else if (date.toDateString() === yesterday.toDateString()) {
				return '昨天';
			} else {
				return `${date.getMonth() + 1}月${date.getDate()}日`;
			}
		},
		getDailyPlayTime(records) {
			const totalMinutes = records.reduce((sum, record) => sum + record.duration, 0);
			return (totalMinutes / 60).toFixed(1);
		},
		navigateToGameDetail(gameId) {
			uni.navigateTo({
				url: `/pages/lobby/gameDetail?id=${gameId}`
			});
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #1E1E2E;
	padding: 12px;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	background: #2D2D44;
	border-radius: 6px;
	margin-bottom: 15px;
}

.title {
	font-size: 18px;
	color: #9796B8;
	font-weight: bold;
}

.total-time {
	font-size: 14px;
	color: #6E6C89;
}

.date-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 15px;
	background: #2D2D44;
	border-radius: 6px 6px 0 0;
	margin-top: 15px;
}

.date-text {
	font-size: 14px;
	color: #9796B8;
}

.daily-time {
	font-size: 12px;
	color: #6E6C89;
}

.game-records {
	background: #2D2D44;
	border-radius: 0 0 6px 6px;
	padding: 0 15px;
}

.record-item {
	display: flex;
	padding: 15px 0;
	border-top: 1px solid rgba(110, 108, 137, 0.2);
}

.record-item:first-child {
	border-top: none;
}

.game-logo {
	width: 50px;
	height: 50px;
	border-radius: 4px;
	margin-right: 12px;
}

.game-info {
	flex: 1;
}

.game-name {
	font-size: 16px;
	color: #9796B8;
	margin-bottom: 8px;
}

.play-info {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #6E6C89;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 50px 0;
}

.empty-image {
	width: 150px;
	height: 150px;
	margin-bottom: 15px;
}

.empty-text {
	color: #6E6C89;
	font-size: 14px;
}
</style> 